import { readdirSync, readFileSync } from 'fs';
import micromark from 'micromark';
import { join } from 'path';

import { NavBar } from '../../components/navbar';
import { CenteredPage, PageTitle } from '../../components/page';
import { Vierkant } from '../../components/ui';

export default function Post(props: {
	post: string;
	content: string;
	tags: string;
}) {
	return <div>
		<NavBar />
		<CenteredPage width={802}>
			<PageTitle>{props.post.replace(/_/g, ' ')}</PageTitle>
			<Vierkant fullwidth>
				<div dangerouslySetInnerHTML={{ __html: props.content }}>
				</div>
			</Vierkant>
		</CenteredPage>
	</div>;
}

function parseTags(fileContent: string) {
	var fileAsArr = fileContent.split('\n');
	var lastLine = fileAsArr[fileAsArr.length - 1];
	if (!lastLine.startsWith(';tags:')) {
		return {
			tags: [],
			result: '',
		};
	}

	var tags = lastLine.replace(';tags:', '').trim().split(' ');

	fileAsArr.pop();
	var result = fileAsArr.join('\n').trim();

	return { tags, result };
}

export function getStaticProps(props: { params: { post: string; }; }) {
	var filename = join('news/', props.params.post + '.md');
	var filecontent = readFileSync(filename).toString().trim();

	var parsed = parseTags(filecontent);
	var content = micromark(parsed.result);

	return {
		props: {
			post: props.params.post,
			content,
			tags: parsed.tags,
		},
	};
}

export function getStaticPaths() {
	var files = readdirSync('news').filter(f => f.endsWith('.md'));

	return {
		paths: files.map((f) => {
			return {
				params: {
					post: f.substr(0, f.length - 3),
				},
			};
		}),
		fallback: false,
	};
}